<template>
  <div class="chart" ref="pieChart"></div>
</template>

<script setup>
import { ref, inject, onMounted, watch, nextTick, onActivated } from 'vue';

const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
});

const Echarts = inject('$echarts');

const myChart = ref(null);
const pieChart = ref(null);

const init = () => {
  myChart.value = Echarts.init(pieChart.value);
  let option = {
    color: [
      '#6115FF',
      '#9544FF',
      '#AF73FF',
      '#CAA1FF',
      '#DAC0FE',
      '#80A8FF',
      '#9FBAF4',
      '#AFCDFF',
      '#79CCB7',
      '#A5DCD4',
    ],
    series: [
      {
        type: 'pie',
        label: {
          show: false,
          position: 'center',
          // 高亮样式。
          emphasis: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
            fontFamily: 'D-DIN-PRO-800-ExtraBold',
          },
          formatter: function (params) {
            return (
              '{a|' + params.value + '%}' + '\n' + '{b|' + params.name + '}'
            );
          },
          rich: {
            a: {
              color: '#333',
              fontWeight: 'bold',
              fontSize: 24,
              height: 40,
              backgroundColor: 'white',
              fontFamily: 'D-DIN-PRO-800-ExtraBold',
            },
            b: {
              color: '#888',
              fontSize: 14,
              backgroundColor: 'white',
            },
          },
        },
        labelLine: {
          show: false,
        },

        // 高亮样式。
        itemStyle: {
          borderWidth: 0,
          borderColor: '#6638FF',
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: '#6638FF', //6638FF
          emphasis: {
            borderWidth: 1.5,
            borderColor: 'rgb(255,255,255,0.8)',
            shadowBlur: 8,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgb(102,56,255,0.6)', //6638FF
          },
        },
        data: props.chartData,
        radius: ['45%', '70%'],
      },
    ],
  };
  myChart.value.clear();
  option && myChart.value.setOption(option);

  // 实现饼图默认高亮选中第一个扇区
  myChart.value.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0, // 默认选中第0个
  });

  // 可选：监听鼠标事件，保持只有一个高亮
  let lastIndex = 0;
  myChart.value.on('mouseover', (params) => {
    if (params.dataIndex !== lastIndex) {
      myChart.value.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: lastIndex,
      });
      myChart.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex,
      });
      lastIndex = params.dataIndex;
    }
  });
  myChart.value.on('mouseout', (params) => {
    // 鼠标移出后，恢复高亮到上一次选中的
    myChart.value.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: lastIndex,
    });
  });
  window.addEventListener('resize', () => {
    if (myChart) {
      myChart.resize();
    }
  });
  myChart.value.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 1,
  });
};

// 监听props.chartData,数据变化的时候渲染
watch(
  () => props.chartData,
  (newData) => {
    if (newData && newData) {
      nextTick(() => {
        init();
      });
    }
  },
  { deep: true }
);

// onActivated(() => {
//   init();
// });
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
